<%@page import="sun.security.util.Length"%>
<%@page import="com.andrew.entity.Order"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>order_payment</title>
    <link href="css/ui.css" rel="stylesheet"/>
    <link href="css/framework.css" rel="stylesheet"/>
    <link href="css/order_payment.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/order_payment.js"></script>
</head>
<body>
<div id="header">
    <img id="imgLogo" style="margin-left: 10px" src="images/bookstore_logo.png"/>
    <div id="navbar" align="right">
        <input id="btnBackToCart" class="navbar_item" type="button" value="Back To Cart" />
    </div>
</div>
<form id="form1" action="PayServlet" method="post" >
<div id="jet">
    	<div id="order-confirmOrder">
    		<input type="hidden" name="orderId" value="${order.orderId}">
            <div id="jet-number"><h2>订单号：${order.orderId}</h2></div>
            <div id="order-address">
                <h3>输入收货地址</h3>
                <div id="order-address-detail"><input type="text" class="address" id="address" name="address" placeholder="输入详细收货地址"></div>
            </div>
            <div id="order-orderDesc">
                <h3>确认订单信息</h3>
                <div id="buy-attribute">
                    <div id="attribute-name">名字</div>
                    <div id="attribute-price">单价</div>
                    <div id="attribute-number">数量</div>
                    <div id="attribute-subtotal">小计</div>
                </div>
            </div>
       
            <div id="order-order">
            	  <c:forEach var="orderDetail" items="${order.orderDetailsList}">
    				<div class="order-item">
                    	<div class="item-Name">
                        	<img src="${orderDetail.book.picture}"><div class="item-info">${orderDetail.book.bookName}</div>
                    	</div>
                   		<div class="item-price">${orderDetail.book.price}</div>
                    	<div class="item-number">${orderDetail.quantity}</div>
                    	<div class="item-subtotal">
                    	    <div class="smple-price">${orderDetail.subTotal}</div>
                    	</div>
                	</div>
  				  </c:forEach>
               
                <!-- <div class="order-item">
                    <div class="item-Name">
                        <img src="BookPicture/fanqiegongzuofatujie.jpg"><div class="item-info">商品名字七个字</div>
                    </div>
                    <div class="item-price">999.00</div>
                    <div class="item-number">99</div>
                    <div class="item-subtotal">
                        <div class="smple-price">999.00</div>
                    </div>
                </div>
                -->
            </div>
            <div class="order-payinfo">
                <div class="order-realpay">
                    <div class="realpay-title">实付款:</div>
                    <div class="order-price">￥</div>
                    <div class="realpay-price"><span>${order.totalPrice}</span></div>
                </div>
            </div>
            <div id="pay">
                <h3>支付方式</h3>
                 <div id="pay-bank">
                     <div class="bank-item">
                         <div class="bank-item-radio"> <input type="radio" value="ABC-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankabc.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"> <input type="radio" value="BOCO-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankbcc.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"> <input type="radio" value="BCCB-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankbj.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"> <input type="radio" value="CCB-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankccb.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"><input type="radio" value="CIB-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankcib.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"><input type="radio" value="CMBCHINA-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankcmb.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"><input type="radio" value="ICBC-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/bankicbc.gif"></div>
                     </div>
                     <div class="bank-item">
                         <div class="bank-item-radio"><input type="radio" value="NJCB-NET-B2C" name="bankId"></div>
                         <div class="bank-pic"><img src="images/bank/nanjing.gif"></div>
                     </div>
                </div>
            </div>

            <div id="pay-submitOrder">
                <div id="wrapper">
                    <input id="btnwrapper" class="btnwrapper" type="button" value="前往支付" />
                </div>
            </div>
    	</div>
    	
</div>
</form>
<div id="footer" align="center">
    <p style="font-size: 13px; color: lightgray;">
        © 2018 Qweas Bookstore, Zhang Wenqiang, Wu Jiatian, Ethan Phung, Andrew Lu and Eric Shuai. All rights reserved.</p>
</div>
</body>
</html>